<!-- 修改单据名称的弹窗组件 -->
<template>
  <div>
    <custom-dialog v-model:visible="isShowDialog">
      <div class="dialog-content">
        <div class="title">单据名称</div>
        <div class="description-box">
          <el-input style="width: 500px" clearable v-model="keyword" placeholder="请输入单据名称" />
        </div>
        <div class="btn-box">
          <div class="cancel-btn" @click="onCancel">取消</div>
          <div class="confirm-btn" @click="onConfirm">确认</div>
        </div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'

const props = defineProps({ showDialog: { type: Boolean, default: false }, keyword: { type: String, default: '' } })
const emit = defineEmits(['update:showDialog', 'onConfirm'])
console.log(props.showDialog, props.keyword)

const isShowDialog = computed({ get: () => props.showDialog, set: val => emit('update:showDialog', val) })
// const keyword = ref(props.keyword.value)
const keyword = ref('')
console.log('1212121>>>>', keyword.value)
watch(() => props.keyword, val => keyword.value = val)

function onCancel() { emit('update:showDialog', false) }
function onConfirm() {
  if (!keyword.value) { ElMessage.warning('请输入单据名称'); return }
  emit('update:showDialog', false)
  emit('onConfirm', keyword.value)
}
</script>

<style lang="scss" scoped>
::v-deep { .el-input__inner { border-radius: 12px; } }
.dialog-content .title { font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: center; color: #333333; }
.dialog-content .description { margin-top: 70px; font-size: 20px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #353535; }
.dialog-content .description-box { margin-top: 60px; display: flex; align-items: center; justify-content: center; height: 48px; font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; }
.dialog-content .btn-box { display: flex; align-items: center; justify-content: space-between; margin-top: 95px; }
.dialog-content .btn-box .cancel-btn { width: 190px; height: 60px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; line-height: 60px; cursor: pointer; }
.dialog-content .btn-box .confirm-btn { width: 190px; height: 60px; background: #7c0a03; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #ffffff; line-height: 60px; cursor: pointer; }
</style>

